/***************************
编辑
* */
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="visible"
    top="8vh"
    @close="closeDialog()"
    width="40vw"
  >
    <div class="boxsty">
        <el-form
                v-loading="dataLoading"
                ref="dataForm"
                :rules="formRules"
                :model="dataForm"
                label-width="100px"
                @keyup.enter.native="dataFormSubmit()"
              >
          <el-row>
              <el-form-item label="统计名称:" prop="hzzqmc">
                <el-select v-model="dataForm.hzzqObj"  @change="$forceUpdate()" value-key="id" placeholder="请选择统计名称" clearable style="width: 100%">
                  <el-option
                    v-for="item in tjmcList"
                    :key="item.id"
                    :label="item.tjmc"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="开始时间:" prop="startDate">
              <el-date-picker
                style="width: 100%"
                v-model="dataForm.startDate"
                type="date"
                placeholder="请选择开始时间"
              ></el-date-picker>
            </el-form-item><!--value-format="yyyy-MM-dd"-->
            <el-form-item label="结束时间:" prop="endDate" >
              <el-date-picker
                style="width: 100%"
                v-model="dataForm.endDate"
                type="date"
                placeholder="请选择结束时间"
              ></el-date-picker><!--value-format="yyyy-MM-dd"-->
            </el-form-item>
          </el-row>
          <el-row>
              <el-form-item label="备注:" prop="bz">
                <el-input type="textarea" rows="5" v-model="dataForm.bz"></el-input>
              </el-form-item>
          </el-row>
        </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="closeDialog()">返回</el-button>
      <el-button type="primary" plain @click="handleConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import {updateFstq,getTjmcList,getDetailById} from "@/api/statisticsanalysis/fractionGet"; //接口api

export default {
  data() {
      let checkDateStart = (rule, value, callback) => {
          if ( value ) {
              let endTime = '' ;
              if (this.dataForm.endDate){
                  endTime = new Date(this.dataForm.endDate) ;
              }else{//如果结束时间为''(未选择),开始时间赋值给结束时间
                  endTime = new Date(value) ;
              }

              if (new Date(value).getTime() > endTime.getTime()) {
                  callback("开始日期不能大于结束日期!");
              } else {
                  callback();
              }
          } else {
              callback("请选择开始日期");
          }
      };

      let checkDateEnd = (rule, value, callback) => {
          if (value) {
              let startTime = '' ;
              if (this.dataForm.startDate){ //如果开始时间为''(未选择)，结束时间赋值给开始时间
                  startTime = new Date(this.dataForm.startDate) ;
              }else{
                  startTime = new Date(value) ;
              }
              if ( new Date(value).getTime() < startTime.getTime()) {
                  callback("结束日期不能小于开始日期!");
              } else {
                  callback();
              }
          } else {
              callback("请选择结束日期");
          }
      };


      let checkBz = (rule, value, callback) => {
          if (value) {
              if (value.length>250) {
                  callback(new Error("最多可输入250个字符!"));
              } else {
                  callback();
              }
          } else {
              callback(new Error("请输入备注"));
          }
      };

    return {
      dialogTitle: "编辑",
      visible: false,
      dataForm: {
          hzzqid:'',
          hzzqmc:'',
          hzzqObj: "",
          bz:'',
          startDate:new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
          endDate:''
      },
      tjmcList: [],
      formRules: {
          tjmc: [{ required: true, message: "请选择统计名称", trigger: "change" }],
          startDate: [{ validator: checkDateStart, trigger: 'change' }],
          endDate: [{  validator: checkDateEnd, trigger: 'change' }],
          bz: [{ validator:checkBz,trigger: "blur"}]
      },
      dataLoading:false,
      menuType:''  //菜单类型 :ht rckh pf zdgz gzrws
    };
  },
  created() {
      this.getTjmcData() ; //获取统计名称
  },
  methods: {
    // 确定
    handleConfirm() {
      this.$refs.dataForm.validate(valid => {
          this.dataForm.hzzqid = this.dataForm.hzzqObj.id  ;
          this.dataForm.hzzqmc = this.dataForm.hzzqObj.tjmc  ;
          this.dataForm.lx = this.menuType ;
          this.dataForm.startDate = this.changeTimeFormat(this.dataForm.startDate) ;
          this.dataForm.endDate = this.changeTimeFormat(this.dataForm.endDate) ;
          delete this.dataForm.hzzqObj ;

        if (valid) {
            updateFstq(Object.assign(this.dataForm))
              .then(r => {
                if (r.data.code == 0) {
                  this.$message.success("编辑成功");
                  this.$emit("refreshDataList");
                  this.closeDialog();
                } else {
                  this.$message.error(r.data.msg);
                }
              })
              .catch(err => {});
        } else {
            console.log("error submit!!");
            return false;
        }
      });
    },
    //初始化日期选项
    initDate() {
      let year = new Date().getFullYear();
      for (let index = 0; index < 11; index++) {
        this.dateOptions.push({
          label: `${year}年${index + 1}月`,
          value: index + 1
        });
      }
    },
    // 初始化
    init(data,menuType) {
        this.visible = true;
        this.menuType = menuType ;
        this.dataLoading = true;
        getDetailById(data.id)
            .then(r => {
                if (r.data.code == 0) {
                    this.dataForm = r.data.data ;
                    this.dataForm.hzzqObj = {id: this.dataForm.hzzqid,tjmc: this.dataForm.hzzqmc} ;//下拉选择默认值
                    this.dataLoading = false ;
                }else{
                    this.$message.error("获取数据失败!");
                }
            }) .catch(err => {
            this.$message.error("获取数据失败!");
        });

    },
    // 表单提交
    dataFormSubmit() {},
    // 关闭
    closeDialog() {
      this.visible = false;
      this.$emit("closeDialog");
    },
    // 获取考核周期数据
    getTjmcData() {
        getTjmcList()
            .then(r => {
                if (r.data.code == 0) {
                    this.tjmcList = r.data.data;
                }
            })
            .catch(err => {});
    },
    //标准事件转成年月日
    changeTimeFormat(time){
        let chinaStandard= time ;
        let date = new Date(chinaStandard);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return  y + '-' + m + '-' + d;  //这里如果不需要小时 分  后边的可以不需要拼接
    }
  }
};
</script>

<style>
</style>
